<!--
 * @Description: 围栏配置
 * @Author: xuzp4
 * @Date: 2021-07-15 10:18:24
 * @LastEditors: xuzp4
 * @LastEditTime: 2021-10-26 11:19:54
 * @FilePath: \vue_demo\src\view\weilan\index.vue
-->

<template>
  <div class="parent">
    <div id="map"></div>
    <div class="button-group">
      <button @click="handleAdd">add</button>
      <button @click="handleEdit">edit</button>
      <button @click="handleDelete">delete</button>
      <button @click="handleDrawColor">绘制颜色</button>
      <button @click="handleSave">保存</button>
      <button @click="handleShow">展示现有的绘制</button>
      <div>{{ area }}平方米</div>
    </div>
  </div>
</template>

<script>
import mapboxgl from "mapbox-gl";
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import * as turf from "@turf/turf";
import _ from "lodash";
export default {
  data() {
    return { area: "", init: true, index: 0 };
  },
  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      let map;
      mapboxgl.accessToken =
        "pk.eyJ1IjoieHUwNDMwIiwiYSI6ImNrcHMzeGNhbDAzcHoyb280cmM1MGEzYXYifQ.uZFE2jGWs46691vFMwQLPA";
      this.map = map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/xu0430/ckqg0r0ng1kk217o6h54ontd1",
        zoom: 14,
        minZoom: 3,
        maxZoom: 19,
        center: [113.722, 24.552],
        doubleClickZoom: false,
        dragRotate: false,
      });
      _.extend(MapboxDraw.modes.direct_select, {
        dragFeature(state, e, delta) {},
      });
      this.draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {},
        userProperties: true,
        //  modes: {
        //     ...MapboxDraw.modes,
        //     // simple_select: NewSimpleSelect,
        //     // direct_select: NewDirectSelect
        // },
        styles: [
          // default themes provided by MB Draw
          // default themes provided by MB Draw
          // default themes provided by MB Draw
          // default themes provided by MB Draw

          {
            id: "gl-draw-polygon-fill-inactive",
            type: "fill",
            filter: [
              "all",
              ["==", "active", "false"],
              ["==", "$type", "Polygon"],
              ["!=", "mode", "static"],
            ],
            paint: {
              "fill-color": "#3bb2d0",
              "fill-outline-color": "#3bb2d0",
              "fill-opacity": 0.1,
            },
          },
          {
            id: "gl-draw-polygon-fill-active",
            type: "fill",
            filter: [
              "all",
              ["==", "active", "true"],
              ["==", "$type", "Polygon"],
            ],
            paint: {
              "fill-color": "#fbb03b",
              "fill-outline-color": "#fbb03b",
              "fill-opacity": 0.1,
            },
          },
          {
            id: "gl-draw-polygon-midpoint",
            type: "circle",
            filter: [
              "all",
              ["==", "$type", "Point"],
              ["==", "meta", "midpoint"],
            ],
            paint: {
              "circle-radius": 3,
              "circle-color": "#fbb03b",
            },
          },
          {
            id: "gl-draw-polygon-stroke-inactive",
            type: "line",
            filter: [
              "all",
              ["==", "active", "false"],
              ["==", "$type", "Polygon"],
              ["!=", "mode", "static"],
            ],
            layout: {
              "line-cap": "round",
              "line-join": "round",
            },
            paint: {
              "line-color": "#3bb2d0",
              "line-width": 2,
            },
          },
          {
            id: "gl-draw-polygon-stroke-active",
            type: "line",
            filter: [
              "all",
              ["==", "active", "true"],
              ["==", "$type", "Polygon"],
            ],
            layout: {
              "line-cap": "round",
              "line-join": "round",
            },
            paint: {
              "line-color": "#fbb03b",
              "line-dasharray": [0.2, 2],
              "line-width": 2,
            },
          },
          {
            id: "gl-draw-line-inactive",
            type: "line",
            filter: [
              "all",
              ["==", "active", "false"],
              ["==", "$type", "LineString"],
              ["!=", "mode", "static"],
            ],
            layout: {
              "line-cap": "round",
              "line-join": "round",
            },
            paint: {
              "line-color": "#3bb2d0",
              "line-width": 2,
            },
          },
          {
            id: "gl-draw-line-active",
            type: "line",
            filter: [
              "all",
              ["==", "$type", "LineString"],
              ["==", "active", "true"],
            ],
            layout: {
              "line-cap": "round",
              "line-join": "round",
            },
            paint: {
              "line-color": "#fbb03b",
              "line-dasharray": [0.2, 2],
              "line-width": 2,
            },
          },
          {
            id: "gl-draw-polygon-and-line-vertex-stroke-inactive",
            type: "circle",
            filter: [
              "all",
              ["==", "meta", "vertex"],
              ["==", "$type", "Point"],
              ["!=", "mode", "static"],
            ],
            paint: {
              "circle-radius": 5,
              "circle-color": "#fff",
            },
          },
          {
            id: "gl-draw-polygon-and-line-vertex-inactive",
            type: "circle",
            filter: [
              "all",
              ["==", "meta", "vertex"],
              ["==", "$type", "Point"],
              ["!=", "mode", "static"],
            ],
            paint: {
              "circle-radius": 3,
              "circle-color": "#fbb03b",
            },
          },
          {
            id: "gl-draw-point-point-stroke-inactive",
            type: "circle",
            filter: [
              "all",
              ["==", "active", "false"],
              ["==", "$type", "Point"],
              ["==", "meta", "feature"],
              ["!=", "mode", "static"],
            ],
            paint: {
              "circle-radius": 5,
              "circle-opacity": 1,
              "circle-color": "#fff",
            },
          },
          {
            id: "gl-draw-point-inactive",
            type: "circle",
            filter: [
              "all",
              ["==", "active", "false"],
              ["==", "$type", "Point"],
              ["==", "meta", "feature"],
              ["!=", "mode", "static"],
            ],
            paint: {
              "circle-radius": 3,
              "circle-color": "#3bb2d0",
            },
          },
          {
            id: "gl-draw-point-stroke-active",
            type: "circle",
            filter: [
              "all",
              ["==", "$type", "Point"],
              ["==", "active", "true"],
              ["!=", "meta", "midpoint"],
            ],
            paint: {
              "circle-radius": 7,
              "circle-color": "#fff",
            },
          },
          {
            id: "gl-draw-point-active",
            type: "circle",
            filter: [
              "all",
              ["==", "$type", "Point"],
              ["!=", "meta", "midpoint"],
              ["==", "active", "true"],
            ],
            paint: {
              "circle-radius": 5,
              "circle-color": "#fbb03b",
            },
          },
          {
            id: "gl-draw-polygon-fill-static",
            type: "fill",
            filter: [
              "all",
              ["==", "mode", "static"],
              ["==", "$type", "Polygon"],
            ],
            paint: {
              "fill-color": "#404040",
              "fill-outline-color": "#404040",
              "fill-opacity": 0.1,
            },
          },
          {
            id: "gl-draw-polygon-stroke-static",
            type: "line",
            filter: [
              "all",
              ["==", "mode", "static"],
              ["==", "$type", "Polygon"],
            ],
            layout: {
              "line-cap": "round",
              "line-join": "round",
            },
            paint: {
              "line-color": "#404040",
              "line-width": 2,
            },
          },
          {
            id: "gl-draw-line-static",
            type: "line",
            filter: [
              "all",
              ["==", "mode", "static"],
              ["==", "$type", "LineString"],
            ],
            layout: {
              "line-cap": "round",
              "line-join": "round",
            },
            paint: {
              "line-color": "#404040",
              "line-width": 2,
            },
          },
          {
            id: "gl-draw-point-static",
            type: "circle",
            filter: ["all", ["==", "mode", "static"], ["==", "$type", "Point"]],
            paint: {
              "circle-radius": 5,
              "circle-color": "#404040",
            },
          },
          {
            id: "gl-draw-polygon-color-picker",
            type: "fill",
            filter: [
              "all",
              ["==", "$type", "Polygon"],
              ["has", "user_portColor"],
            ],
            paint: {
              "fill-color": ["get", "user_portColor"],
              "fill-outline-color": ["get", "user_portColor"],
              "fill-opacity": 0.5,
            },
          },
          {
            id: "gl-draw-line-color-picker",
            type: "line",
            filter: [
              "all",
              ["==", "$type", "LineString"],
              ["has", "user_portColor"],
            ],
            paint: {
              "line-color": ["get", "user_portColor"],
              "line-width": 2,
            },
          },
          {
            id: "gl-draw-point-color-picker",
            type: "circle",
            filter: [
              "all",
              ["==", "$type", "Point"],
              ["has", "user_portColor"],
            ],
            paint: {
              "circle-radius": 3,
              "circle-color": ["get", "user_portColor"],
            },
          },
        ],
      });
      map.on("draw.create", this.updateArea);
      map.on("draw.delete", this.updateArea);
      map.on("draw.update", this.updateArea);
      map.on("draw.selectionchange", (e) => {
        const mode = this.draw.getMode();
        const selected = this.draw.getSelectedIds()[0];
        if (mode === this.draw.modes.SIMPLE_SELECT && selected) {
          this.draw.changeMode(this.draw.modes.DIRECT_SELECT, {
            featureId: selected,
          });
        }
      });
      map.on("load", function () {
        // ALL YOUR APPLICATION CODE
      });
    },
    handleAdd() {
      window.MapboxDraw = MapboxDraw;
      if (this.init) {
        this.map.addControl(this.draw, "top-left");
        this.init = false;
      }
      this.draw.changeMode(this.draw.modes.DRAW_POLYGON);
    },
    handleEdit() {
       this.removeLayer()
      if (this.curEle) {
        this.draw.deleteAll();
        this.draw.add(this.curEle);
      }
    },
    handleDelete() {
       this.removeLayer()
      const selectedIds = this.draw.getSelectedIds();
      this.draw.delete(selectedIds);
      this.curEle = undefined;
      this.allEle = undefined;
    },
    updateArea(e) {
      const featureCollection = this.draw.getAll();
      this.curEle = featureCollection.features[0];
      window.curEle = this.curEle;
      this.area = turf.area(this.curEle);
    },
    handleDrawColor() {
      this.index++;
      const colorMap = ["#000", "#ff0000", "#008000", "#234563", "#ff20d0"];
      const color = colorMap[this.index % 5];
      const drawFeatureID = this.draw.getSelectedIds();
      if (drawFeatureID !== "" && typeof this.draw === "object") {
        // add whatever colors you want here...
        drawFeatureID.forEach((id) => {
          this.draw.setFeatureProperty(id, "portColor", color);
          var feat = this.draw.get(id);
          this.draw.add(feat);
        });
      }
    },
    handleSave() {
      this.removeLayer()
      const featureCollection = this.draw.getAll();
      this.curEle = featureCollection.features[0];
      this.allEle = featureCollection;
      console.log('保存的围栏',this.curEle)
      this.draw.deleteAll();
    },
    handleShow() {
      console.log("this.allEle", this.allEle);
      this.removeLayer()
      this.map.addSource('allEle',{
        type: 'geojson',
        data:this.allEle
      })
      this.map.addLayer({
        id:'allEle',
        source:'allEle',
        type:'fill',
        paint:{
          "fill-color": "#3bb2d0",
          "fill-outline-color": "red",
          "fill-opacity": 0.5,
        }
      })
      // this.draw.set(this.allEle);
    },
    removeLayer() {
     this.map.getSource('allEle') && this.map.removeSource('allEle')
     this.map.getLayer('allEle') &&  this.map.removeLayer('allEle')
    }
  },
};
</script>

<style>
.parent {
  width: 100%;
  height: 100%;
  color: #fff;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
.button-group {
  position: absolute;
  left: 60px;
  top: 0;
}
</style>
